﻿.mud-popover {
    width: 100%;
    outline: 0;
    z-index: calc(var(--mud-zindex-popover) + 1);
    visibility: hidden;
    opacity: 0;
    position: absolute;
    overflow-x: hidden;
    overflow-y: auto;

    &.mud-popover-open {
        visibility: visible;
        opacity: 1;
        animation: mud-animation-fadein 251ms;
    }

    &.mud-popover-top {
        bottom: 0;

        &.mud-popover-offset-y {
            bottom: 100%;
            top: auto;
        }
    }

    &.mud-popover-bottom {
        top: 0;

        &.mud-popover-offset-y {
            top: 100%;
            bottom: auto;
        }
    }

    &.mud-popover-left {
        left: 0;

        &.mud-popover-offset-x {
            right: 100%;
            left: auto;
        }
    }

    &.mud-popover-right {
        right: 0;

        &.mud-popover-offset-x {
            left: 100%;
            right: auto;
        }

        &.mud-popover-offset-y {
            top: 100%;
            bottom: auto;
        }
    }
}
